<template>
	<view class="all">
	<scroll-view class="left" scroll-y>
		<view class="a active" @click="LeftClick(index)">选择城市</view>
		<view class="a" v-for="item in rm" :key="item.id" @click="tz(item.city)">{{item.city}}</view>
		<!-- <view class="a">西双版纳</view>
		<view class="a">大理</view>id
		<view class="a">红河</view>
		<view class="a">丽江</view>
		<view class="a">香格里拉</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view> 
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view>
		<view class="a">你好</view>
		<view class="a">hhh</view>
		<view class="a">znjsk</view>
		<view class="a">你好</view> -->
	</scroll-view>	
	<!-- 右边 -->
	<scroll-view class="right" scroll-y>
		<view class="d">属于该地区的兴趣点</view>
		
		<view class="dataInfo">
		  <!-- <view class="search">
		   <view class="searchIput">
		    <input type="text" placeholder="输入你要搜索的内容" placeholder-style='color:grey' v-model="inputs">
		    <image src="../../static/01.jpg" mode="aspectFill"></image>
		   </view>
		  </view> -->
		
		   <view class="dataList" v-for="item in list" :key="item.id">
		    <checkbox-group @change="checkClick(item)">
		    <checkbox :checked= list2[0].checked />
		    </checkbox-group>
		    <view class="details">
		     <view class="img">
		      <image :src="item.pictureUrl"></image>
		     </view>id
		     <view class="text">
		      <text>{{item.name}}</text>
		      <text>{{item.city}}</text>
		      <text @click="xq(item.name)">查看详情</text>
		     </view>
		    </view>
		   </view>
		
		
		
		</view>
	</scroll-view>
	<view class="dbdh1" @click="Sclx">
		生成路线（已选择{{areanum}}个地点）
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rm:[
					{
						"id":1,
						"city":"丽江"
					},
					{
						"id":2,
						"city":"大理"
					},
					{
						"id":3,
						"city":"昆明"
					},
					{
						"id":4,
						"city":"石林"
					},
					{
						"id":5,
						"city":"禄丰"
					},
					{
						"id":6,
						"city":"香格里拉"
					},
					{
						"id":7,
						"city":"曲靖"
					},
					{
						"id":8,
						"city":"文山"
					},
					{
						"id":9,
						"city":"上海"
					},
					{
						"id":10,
						"city":"北京"
					},
					{
						"id":11,
						"city":"杭州"
					}
				],
		// 		active:0,
		// 		area:''
		// 	}
		// }, return {
			n:0,
		active:0,
	   areanum:0,
	   lx:[],  //路线
    allChecked: false,
    inputs: "",
	list:[],
    list2: [{
      trip: "飞机-轮船-国际火车",
      num: 1,
      checked: false,
      price: 149,
      name: '波兰斯维诺乌伊希切',
      url: "https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png",
     },
     {
      trip: "飞机-轮船-国际火车",
      num: 1,
      checked: false,
      price: 240,
      name: '冰岛尼斯湖',
      url: "https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png",
     },
     {
      trip: "飞机-轮船-汽车-火车",
      num: 1,
      checked: false,
      price: 410,
      name: '云南西双版纳',
      url: "https://img-blog.csdnimg.cn/23ad5958b6534375b42cee837eeaefbf.png",
     },
     {
      trip: "飞机-轮船-汽车-火车",
      num: 1,
      checked: false,
      price: 500,
      name: '阿尔卑斯雪山',
      url: "https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png",
     },
	 {
	   trip: "飞机-轮船-国际火车",
	   num: 1,
	   checked: false,
	   price: 149,
	   name: '波兰斯维诺乌伊希切',
	   url: "https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png",
	  },
	  {
	   trip: "飞机-轮船-国际火车",
	   num: 1,
	   checked: false,
	   price: 240,
	   name: '冰岛尼斯湖',
	   url: "https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png",
	  },
	  {
	   trip: "飞机-轮船-汽车-火车",
	   num: 1,
	   checked: false,
	   price: 410,
	   name: '云南西双版纳',
	   url: "https://img-blog.csdnimg.cn/23ad5958b6534375b42cee837eeaefbf.png",
	  },
	  {
	   trip: "飞机-轮船-汽车-火车",
	   num: 1,
	   checked: false,
	   price: 500,
	   name: '阿尔卑斯雪山',
	   url: "https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png",
	  },
    ],
   }
  },
  computed: {
   totalPrice() {
    //总计金额
    var str = 0;
    for (var i = 0; i < this.searchData.length; i++) {
     if (this.searchData[i].checked) {
      str += this.searchData[i].num * this.searchData[i].price;
     }
    }
    return str;
   },
   searchData: function() {
    //模糊查询
    if (!this.inputs) {
     return this.list;
    }
    return this.list.filter((item) => {
     return item.name.includes(this.inputs);
    });
   },
  },
		methods: {
			tz(city){
				console.log(city)
				uni.request({
					url:'http://microtourism.natapp1.cc/serviceinterestpoint/interest-interest/getInterestByCity?city='+city,
						
							method: 'GET',
						
						
							success: (res) => {
								// this.rm = res.data.data
								console.log('123')
								console.log(res.data.data)
								this.list=res.data.data
								
							},
							fail: (err) => {
								console.log(err)
							}
						
					})
				
			},
			
			xq(id){
				console.log(id)
				uni.navigateTo({
					url:'../pathxq/pathxq?id='+id
				})
			},
			
			checkClick(item) {
				   console.log(item)
				   let zz={
					   "name":item.name,
					   "add" :item.coordinate,
					   "time":300
				   }
				   console.log(zz)
				   this.lx[this.n]=zz
				   console.log(this.lx)
				   this.n+=1
				   console.log(this.n)
				   
				   
				   this.areanum+=1
				   },
				   
			LeftClick(index){
				console.log(index)
				this.active=index;
				
			}
			,
			Sclx(){
				console.log(2)
				uni.navigateTo({
					url:'../pathlx/pathlx',
				})
			}
		},
		onLoad() {
			uni.request({
				// url:'http://localhost:10200/api/v1/city?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwicGhvbmUiOiIxNTkxMTI0NTAxNiIsIm5pY2tuYW1lIjoiYXJ0dXJpYW11IiwicGFzc3dvcmQiOiIyNWY5ZTc5NDMyM2I0NTM4ODVmNTE4MWYxYjYyNGQwYiIsImV4cCI6MTY2NDAyMzk4NywiaXNzIjoiZ2luLWJsb2cifQ.zXHTbWO5zeRPVBK-YmRmHodl3wJlOOpMa01gWLaBTmE',
					url:'http://175.24.175.35:10200/api/v1/city/',
						method: 'GET',
					// data:{
					// 	token:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwicGhvbmUiOiIxNTkxMTI0NTAxNiIsIm5pY2tuYW1lIjoiYXJ0dXJpYW11IiwicGFzc3dvcmQiOiIyNWY5ZTc5NDMyM2I0NTM4ODVmNTE4MWYxYjYyNGQwYiIsImV4cCI6MTY3NDY5NzQ0NSwiaXNzIjoiZ2luLWJsb2cifQ.dVHX5g7OToKWUd3miGOVwkFM5CSG4A-PFtyx5DJoKeQ'
					// },
					
						success: (res) => {
							// this.rm = res.data.data
							console.log('12367687879')
							console.log(res.data)
							// console.log(res.data.Data.data.data)
							// let s=res.data.data.item.name
							// console.log(s)
							
						},
						fail: (err) => {
							console.log(err)
						}
					
				})
			
			uni.request({
				url:'http://microtourism.natapp1.cc/serviceinterestpoint/interest-interest/getInterestByCity?city=丽江',
					
						method: 'GET',
					
					
						success: (res) => {
							// this.rm = res.data.data
							console.log('123')
							console.log(res.data.data)
							this.list=res.data.data
							
						},
						fail: (err) => {
							console.log(err)
						}
					
				})
		}
	}
</script>

<style>
	
page{
	height: 100%;
}
.all{
	height: 100%;
	display: flex;
}
.left{
	width: 200rpx;
	height: 100%;
	border-right: 1px solid #eee;
	padding-bottom: 50px;
	}
	
	.a{
		height: 50px;
		line-height: 50px;
		color: #333;
		font-size: 30rpx;
		color: #399fff;
		border-top: 1px solid #eee;
		text-align: center;
		background-color: #fff;
}
.active{
	background-color: aliceblue;
	
}
	
.right{
	height: 100%;
	width: 550rpx;
	padding-bottom: 50px;
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* justify-content: space-between; */
	
}
.c{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item{
	width: 240rpx;
	height:240rpx;
	background-image: url('@/static/01.jpg');
	background-size: 150%;
	display: block;
	
	margin-left: 5px;
	margin-top: 20px;
	margin-right: 5px;
	margin-bottom: 10px;
	border-radius: 8%;
	
}
.b{
	font-size: 35rpx;
	margin: 15px;
	
}
.dbdh1{
	position: fixed;
	bottom:0rpx;
	width: 100%;
	height: 50px;
	text-align: center;
	font-size: 35rpx;
	line-height: 50px;
	background-color:#99ccff;
}
.dbdh2{
	position: fixed;
	bottom: 50px;
	width: 100%;
	background-color: #fff;
	color: cornflowerblue;
}
.d{
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: #fff;
}
/deep/uni-checkbox .uni-checkbox-input {
  border-radius: 50%;
 }

 /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border-color: #ddd;
  color: #fff !important;
  background-color: #2DCF8C !important;
 }

 /deep/uni-checkbox .uni-checkbox-input {
  border-color: #ddd;
 }

 /deep/uni-checkbox .uni-checkbox-input:hover {
  border-color: #ddd;
 }

	





 .dataInfo {
  width: 95%;
  margin: 0 auto;
 }

 .dataInfo .dataList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #F1F1F1;
  padding: 25rpx 0;
 }

 .dataInfo .dataList .details {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 0;
 }

 
 .dataInfo .dataList .details .img image {
  width: 200rpx;
  height: 140rpx;
  padding: 0 20rpx;
  
  
 }

 .dataInfo .dataList .details .text text {
  color: #000;
  font-size: 28rpx;
  display: block;
  padding: 10rpx 0;
 }

 .dataInfo .dataList .details .text text:last-child {
  color: #9966cc;
  font-size: 25rpx;
 }

 .dataInfo .dataList .action text {
  font-size: 25rpx;
  color: #000;
  border: 1px solid #C8C7CC;
  display: inline-block;
  line-height: 50rpx;
  width: 60rpx;
  text-align: center;
  box-sizing: border-box;
 }

 .dataInfo .dataList .action text:nth-child(2) {
  border-left: none;
  border-right: none;
 }

 .buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 95%;
  transform: translate(-50%, 0);
 }

 .buy .checked {
  display: flex;
  align-items: center;
 }

 .buy .checked text {
  font-size: 25rpx;
  color: #000;
  padding: 0 12rpx;
 }

 .buy .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
 }

 .buy .total .price {
  padding-right: 20rpx;

 }

 .buy .total .price text {
  font-size: 27rpx;
  color: #C8C7CC;
  display: inline-block;
 }

 .buy .total .price text:last-child {
  color: red;
  font-weight: bold;
 }

 .buy .total .bill text {
  font-size: 25rpx;
  color: #fff;
  display: inline-block;
  background-color: red;
  line-height: 70rpx;
  width: 150rpx;
  text-align: center;
 }
</style>
